<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易版 Promise </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .promise {
            margin: 30px auto;
        }

        .title,
        .desc {
            text-align: center;
            margin-bottom: 30px;
        }

        .codeImgBox {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="promise">
        <div class="title">
            简易版 promise 仅实现了 then catch
        </div>
        <div class="desc">
            控制台查看以下代码的输出结果
        </div>
        <div class="codeImgBox">
            <img src="./images/code.png" alt="">
        </div>

    </div>
    <script src="./js/myPromise.js"></script>
    <script>
        // 实例化
        let testP1 = new MyPromise((resolve, reject) => {
            resolve('测试 - 同步 - resolve')
        })
        testP1.then(res => {
            console.log('testP1 - 同步 - resolve =>', res);
        })

        let testP2 = new MyPromise((resolve, reject) => {
            reject('测试 - 同步 - reject')
        })
        testP2.catch(err => {
            console.log('testP2 - 同步 - reject =>', err);
        })
        let testP3 = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                resolve('测试 - 异步 - resolve')
            }, 2000)
        })
        testP3.then(res => {
            console.log('testP2 - 异步 - resolve =>', res);
        })
        let testP4 = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                reject('测试 - 异步 - reject')
            }, 2000)
        })
        testP4.catch(res => {
            console.log('testP4 - 异步 - reject =>', res);
        })

        let testP5 = new MyPromise((resolve, reject) => {
            resolve('测试 - 同步 resolve .then 穿透')
        })
        testP5.then().then(res => {
            console.log('testP5 - 同步 resolve - then 穿透 =>', res);
        })
        let testP6 = new MyPromise((resolve, reject) => {
            reject('测试 - 同步 reject .then 穿透')
        })
        testP6.then().then().catch(err => {
            console.log('testP6 - 同步 reject - then 穿透 =>', err);
        })
    </script>
</body>

</html>